<template>
  <div class="user-page">
    <!-- 布局 -->
    <el-row :gutter="10">
      <!-- 左侧 -->
      <el-col :span="8">
        <div>
          <div style="display: flex; margin-bottom: 12px">
            <!-- 搜索表单 -->
            <el-form inline size="small">
              <el-form-item>
                <el-input>
                  <el-button slot="append" icon="el-icon-search"></el-button>
                </el-input>
              </el-form-item>
            </el-form>
            <!-- 筛选全部按钮 -->
            <el-button type="primary" style="height: 32px" size="small"
              >全部</el-button
            >
          </div>

          <!-- table表格 -->
          <el-table :data="tableData" border style="width: 81%">
            <el-table-column
              prop="date"
              label="名称"
              width="220"
            ></el-table-column>
            <el-table-column prop="name" label="备注"></el-table-column>
          </el-table>
        </div>
      </el-col>

      <!-- 右侧 -->
      <el-col :span="16">
        <div class="header">
          <!-- <div style="display:inline-block"></div> -->
          <div>
            <!-- 当前标题 -->
            <div class="title">当前组：全部</div>
            <!-- 搜索表单 -->
            <div class="form">
              <el-form :inline="true" size="small">
                <el-form-item>
                  <el-input>
                    <el-button slot="append" icon="el-icon-search"></el-button>
                  </el-input>
                </el-form-item>
              </el-form>
              <!-- 右侧按钮 -->
              <el-button size="small" type="primary" style="height: 32px"
                >同步用户</el-button
              >
              <el-button size="small" type="primary" style="height: 32px"
                >重置密码</el-button
              >
            </div>
          </div>
        </div>
        <!-- table表格 -->
        <div class="table">
          <el-table :data="tableData" border style="width: 100%">
            <el-table-column
              prop="date"
              label="用户名"
              width="120"
            ></el-table-column>
            <el-table-column
              prop="name"
              label="真实姓名"
              width="120"
            ></el-table-column>
            <el-table-column
              prop="address"
              label="电子邮箱"
              width="220"
            ></el-table-column>
            <el-table-column prop="address" label="权限"></el-table-column>

            <el-table-column prop="address" label="操作" width="150">
              <template>
                <el-button size="mini">编辑</el-button>
                <el-popconfirm
                  title="这是一段内容确定删除吗？"
                  @confirm="confirmDel"
                >
                  <el-button
                    style="margin-left: 10px"
                    size="mini"
                    type="danger"
                    slot="reference"
                    >删除</el-button
                  >
                </el-popconfirm>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage4"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="10"
            layout="total, sizes, prev, pager, next, jumper"
            :total="40"
          ></el-pagination>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentPage4: 4,
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
        },
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
        },
      ],
    };
  },
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    // 确认删除的回调
    confirmDel() {
      this.$message.success("删除成功");
    },
  },
};
</script>

<style lang="scss" scoped>
.user-page {
  background-color: #fff;
  padding: 70px 30px 150px;

  .header {
    width: 100%;
    overflow: auto;

    .title {
      float: left;
      font-weight: 700;
    }

    .form {
      display: flex;
      justify-content: flex-end;
    }
  }
}
</style>